import { useSelector, useDispatch } from 'react-redux';
import { increment, asyncIncrement } from './store/feature/counterSlice';
import { loadData } from './store/feature/movieSlice';
import { useEffect } from 'react';

const App = () => {
    const { count } = useSelector(state => state.counter);
    const { list } = useSelector(state => state.movie);
    const dispatch = useDispatch();
    useEffect(() => {
        dispatch(loadData());
    }, []);
    return (
        <>
            <div>
                <p>{count}</p>
                <button onClick={() => {
                    dispatch(increment({ step: 2 }))
                }}>同步增加</button>
            </div>
            <div>
                <p>{count}</p>
                <button onClick={() => {
                    dispatch(asyncIncrement({ step: 3 }));
                }}>异步增加</button>
            </div>
            <ul>
                {
                    list.map(item => (
                        <li key={item.tvId}>{item.name}</li>
                    ))
                }
            </ul>
        </>
    )
}

export default App;
